<template>
	<view class="Wrapper">
		<view class="warBox">
			<view class="flex-1">
				<view class="content">
					<view class="d-flex a-center width">
						<image
							:src="imgUrls(mainStore.userInfo.avatar)"
							mode="aspectFill"
							class="headImg"
							@click.stop="changeAvatar"></image>
						<text class="flex-1 black size30 bold m-left10"
							>{{ infoData.realName }}律师</text
						>
						<up-icon name="scan" color="#333" size="60rpx" @click="Scan"></up-icon>
					</view>
				</view>
				<view class="listBox">
					<view class="list" @click.stop="toUrl(`infor`)">
						<view class="imgBox flexac">
							<image
								:src="staticImg('grxx.png')"
								mode="aspectFill"
								class="userImg"></image>
						</view>
						<text class="color-222 size28 m-left20">个人信息</text>
						<view class="iconfont icon-a-zujian32 color-666 size24 j-self-end"></view>
					</view>
					<view class="list" @click.stop="toUrl(`collList`)">
						<view class="imgBox flexac">
							<image
								:src="staticImg('s2.png')"
								mode="aspectFill"
								class="userImg01"></image>
						</view>
						<text class="color-222 size28 m-left20">收款记录</text>
						<view class="iconfont icon-a-zujian32 color-666 size24 j-self-end"></view>
					</view>
					<view class="list" @click="outBtn">
						<view class="imgBox flexac">
							<image
								:src="staticImg('s3.png')"
								mode="aspectFill"
								class="userImg01"></image>
						</view>
						<text class="color-222 size28 m-left20">退出登录</text>
						<view class="iconfont icon-a-zujian32 color-666 size24 j-self-end"></view>
					</view>
					<!-- 	<view class="list" @click.stop="editPass">
						<view class="imgBox flexac">
							<image
								:src="staticImg('xgmm.png')"
								mode="aspectFill"
								class="xgmmImg"></image>
						</view>
						<text class="color-222 size28 m-left20">修改密码</text>
						<view class="iconfont icon-a-zujian32 color-666 size24 j-self-end"></view>
					</view> -->
				</view>
			</view>
			<!-- <view class="outBtn" @click="outBtn">退出登陆</view> -->
		</view>

		<TabBar :tab="2"></TabBar>
	</view>
</template>

<script setup>
	import TabBar from './components/TabBar.vue';
	import { ref, computed, watch } from 'vue';
	import { lawyerInfo, saveMyInfo } from '@/utils/api.js';
	import { onLoad, onShow, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
	import {
		staticImg,
		toUrl,
		imgUrls,
		Logout,
		Modal,
		chooseImage,
		uploadFile,
		Toast,
	} from '@/utils/utils.js';
	import { useMainStore } from '@/stores/index';
	import Http from '@/utils/request.js';

	const mainStore = useMainStore();
	const infoData = ref('');

	onLoad(async () => {
		const result = await lawyerInfo();
		infoData.value = result.data;
	});

	onShow(() => {
		let options = wx.getEnterOptionsSync()
		if(options.scene == '1038' && options.referrerInfo.appId == 'wxef277996acc166c3' && showTip.value == 1) {
			let extraData = options.referrerInfo.extraData
			if(!extraData) return
			if(extraData.code == 'success') Toast('支付成功')
		}
	})

	const changeAvatar = async () => {
		const Img = await chooseImage();
		const result = await uploadFile(Img);
		const paramData = {
			avatar: result,
		};
		const save = await saveMyInfo(paramData);
	};

	const editPass = () => {
		toUrl(`/pages/login/editPass`);
	};

	const outBtn = async () => {
		const result = await Modal('是否确定要退出登录？');
		if (result) Logout();
	};

	const showTip = ref(0)
	const Scan = () => {
		uni.scanCode({
			success: async (res) => {
				console.log(res);
				let obj = JSON.parse(res.result);
				if (obj.action == 'login') {
					// 扫码登录
					let result = await Modal('确认登录律师工作台吗？');
					if (!result) return;
					Http.post({
						url: '/api/confirmLogin',
						data: {
							sceneId: obj.sceneId,
						},
					}).then((res1) => {
						Toast(res1.msg);
					});
				} else if (obj.action == 'buyMember') {
					// 办理套餐
					let result = await Modal('确认发起支付吗？')
					if (!result) return
					if(obj.extraData) {
						showTip.value = 1
						wx.openEmbeddedMiniProgram({
							appId: obj.appId,
							extraData: JSON.parse(obj.extraData)
						})
					}
				}
			},
		});
	};
</script>
<style lang="scss">
	page {
		background-color: $page;
	}
</style>
<style lang="scss" scoped>
	.Wrapper {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));

		.warBox {
			flex: 1;
			display: flex;
			flex-direction: column;
		}

		.content {
			width: 100%;
			height: 500rpx;
			padding: 0 50rpx;
			background: linear-gradient(180deg, #c3dfff, #f9f9f9);
			display: flex;
			align-items: center;

			.headImg {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}
		}

		.listBox {
			width: 710rpx;
			margin: 0 auto;
			background-color: #fff;
			border-radius: 10rpx;

			.list {
				width: 100%;
				height: 100rpx;
				padding: 0 20rpx 0 50rpx;
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #f2f2f2;

				.imgBox {
					width: 34rpx;
					height: 34rpx;

					.userImg {
						width: 30rpx;
						height: 34rpx;
					}
					.userImg01 {
						width: 32rpx;
						height: 34rpx;
					}

					.xgmmImg {
						width: 26rpx;
						height: 32rpx;
					}
				}
			}

			.list:last-child {
				border-bottom: none;
			}
		}

		.outBtn {
			width: 710rpx;
			height: 88rpx;
			margin: 0 auto 100rpx auto;
			background-color: #bbbbbb;
			border-radius: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 28rpx;
		}
	}
</style>
